<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <header>
        <div class="box">
            <ul>
                <li>这是li01</li>
                <li>这是li02</li>
                <li>这是li03</li>
                <li>这是li04</li>
                <li>这是li05</li>
            </ul>
        </div>
        <ul>
            <li>lili01</li>
            <li>lili02</li>
            <li>lili03</li>
            <li>lili04</li>
            <li>lili05</li>
        </ul>
    </header>
    <script>
        //找到.box 的后代元素li
       /*  $(".box").find("li").css({
            border:"1px solid red"
        }); */

    /*     找到。box的直系子元素
        $(".box").children().css({
            border:"1px solid red"
        });
        $(".box").children("ul").css({
            border:"1px solid red"
        }); */

        /* siblings()找到所有兄弟元素
        $(".box").children("ul").children("li").eq(2).siblings().css({
            border:"1px solid blue"
        }) */
         // 下一个兄弟
        // $(".box").children("ul").children("li").eq(2).next().css({
        //     border:"1px solid blue"
        // })

        // 下面的所有兄弟元素
        // $(".box").children("ul").children("li").eq(2).nextAll().css({
        //     border:"1px solid blue"
        // })

        // 上一个兄弟
        // $(".box").children("ul").children("li").eq(2).prev().css({
        //     border:"1px solid blue"
        // })

        // 上面所有兄弟
        // $(".box").children("ul").children("li").eq(2).prevAll().css({
        //     border:"1px solid blue"
        // })

        // 找到父 标签
        // $(".box").parent().css({
        //     border:"1px solid blue"
        // })   

        // 找到所有父级标签
        // $(".box").parents().css({
        //     border:"1px solid blue"
        // })
        
        // 找到父级标签中的谁
        $(".box").parents("body").css({
            border:"1px solid blue"
        })
    </script>
</body>
</html>